<template>
  <div class="borrow-hot-list"
    ref="borrowHotListRef">
    <div class="box radius-4"
      :style="{ height: '100%' }">
      <el-row class="">
        <div class="borrow-box"
          ref="borrowBoxRef">
          <ul>
            <li v-for="(item, index) in borrowList"
              :key="item.index"
              :class="`bubble${index}`"
              class="bubble"
              @click="clickChartUnit">
              <div class="progress-content">
                <span class="borrow-process">
                  <span class="borrow-no"
                    style="margin-right: 5px;">{{ "No." + (index + 1) }}</span>
                  <span class="borrow-tit">{{ item.name }}</span>
                </span>
                <span>
                  {{ item.value }}
                  <span class="borrow-count">/个</span>
                </span>
              </div>
              <progress-bar v-if="item.pro&&item.pro>0"
                width="100%"
                height="4px"
                leftBg="linear-gradient(90deg, #02224E 0%, #00CCFF 100%)"
                bgc="#0C356F"
                ballBgc="#00FEFF"
                :value="item.pro">
              </progress-bar>
            </li>
          </ul>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
import ProgressBar from './progress.vue'
export default {
  components: {
    ProgressBar
  },
  props: {
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      totalCount: 100,
      borrowList: []
    }
  },
  created() {
    this.initMessage()
  },
  mounted() {
    this.initScroll()
  },
  methods: {
    initMessage() {
      this.borrowList = [
        {
          name: '陆军',
          value: 9810,
          pro: 90
        },
        {
          name: '海军',
          value: 8100,
          pro: 88
        },
        {
          name: '空军',
          value: 7817,
          pro: 85
        },
        {
          name: '火箭军',
          value: 7810,
          pro: 83
        },
        {
          name: '战略支援部队',
          value: 6987,
          pro: 80
        },
        {
          name: '军事科学院',
          value: 6810,
          pro: 78
        },
        {
          name: '国防大学',
          value: 5810,
          pro: 65
        },
        {
          name: '国防科技大学',
          value: 4810,
          pro: 55
        },
        {
          name: '武警部队',
          value: 3810,
          pro: 50
        },
        {
          name: '战区',
          value: 810,
          pro: 40
        }
      ]
      // getExpertiseArea({ year: this.year }).then(res => {
      //   this.borrowList = res?.data ?? []
      // })
    },
    clickChartUnit(val) {
      console.log(
        '%c [ val ]-153',
        'font-size:13px; background:pink; color:#bf2c9f;',
        val
      )
      this.$router.push({ name: 'largeUnitsChart' })
    },
    // 数据滚动
    initScroll() {
      // 拿到table挂在后的真实DOM
      const table = this.$refs.borrowBoxRef
      // 拿到挂在数据的div
      const divData = table
      // 鼠标移入停止滚动
      divData.onmouseover = () => {
        clearInterval(this.t)
      }
      // 初次调用
      this.start(divData)
      // 鼠标移出开始滚动
      divData.onmouseout = () => {
        this.start(divData)
      }
    },
    start(divData) {
      if (divData.clientHeight > divData.scrollHeight) {
        return
      }
      this.t = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.borrow-hot-list {
  width: 100%;
  height: 100%;
  .el-row {
    height: 100%;
  }
  .borrow-box {
    height: 100%;
    overflow: hidden;
    ul li {
      height: 56px;
      line-height: 56px;

      position: relative;
      .progress-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .borrow-process {
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      span {
        font-family: 'PingFangSC-Medium';
        font-size: 14px;
        color: #e7f2ff;
        font-weight: 500;
        &.borrow-no {
          font-family: 'DIN-Regular PingFangSC-Medium';
          font-size: 16px;
          color: #e7f2ff;
          font-weight: 400;
        }
        &.borrow-count {
          font-family: 'PingFang-SC-Regular';
          font-size: 12px;
          color: #7cb4ff;
          line-height: 20px;
          font-weight: 400;
        }
      }
    }
  }
}
@keyframes outlineOpacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
</style>
